<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>账号注册</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css" rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->
  <link rel="stylesheet" href="/css/main.min.css">

  <!-- /style -->
</head>

<body>
  <div class="signin">
    <div class="signin-wrapper">
      <div class="signin-panel">
        <div class="signin-logo">
          通河县数字文化馆
        </div>
        <div class="signin-title js_signin_title">
          <span class="signinItem name" tpid="0">账号登录</span><span class="signinItem link hover" tpid="1">手机账号注册</span>
        </div>

        <section class="sign_module_item">
          <div class="signin-content">
            <div class="module signin-input">
              <input type="tel" class="s-text" placeholder="请输入手机号码" />
            </div>
            <div class="module signin-input">
              <input type="text" class="s-text w60" id="codeText" placeholder="请输入图形验证码" /><span class="signin-v-code"> <img src="http://via.placeholder.com/150x35" width="100%" height="35" alt=""></span>
            </div>
            <div class="module signin-input">
              <input type="text" class="s-text w60" id="noteText" placeholder="请输入短信验证码" />
              <div class="phone-code j_send_register">发送手机验证码</div>
            </div>
          </div>
        </section>



        <!-- 手机注册 -->

        <!-- 忘记密码 -->



        <div class="signin-input statement">
          <input type="checkbox" class="s-check js_signin_statement" />我已认真阅读并接受<span class="js_statement">《广西数字文化馆云责声明》</span>
          <span class="signinItem signinPwd" tpid="2">忘记密码</span>
        </div>


        <div class="module signin-input">
          <input type="button" class="loginBtn" disabled="disabled" value="注册" />
        </div>

      </div>
    </div>
  </div>
  <!-- /page -->

  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css" rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>



  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="/js/common.min.js"></script>

  <!-- /script -->
</body>
<script type="text/html" id="tplSignin">
  <div class="win-signin-wrapper">
    <div class="win-statement-panel">
      <div class="win-statement-title">
        用户服务协议
      </div>
      <div class="win-statement-comt">
        我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明我已认真阅读并接受《广西数字文化馆云责声明》文字详情说明
      </div>
      <div class="win-statement-btn">
        <span class="confirmBtn" s-type="0">不同意</span><span class="confirmBtn s-bg" s-type="1">同意</span>
      </div>
    </div>
  </div>
</script>

<script type="text/html" id="tplSignin0">
  <div class="signin-content">
    <div class="module signin-input">
      <input type="tel" class="s-text"  placeholder="请输入手机号码" />
    </div>
    <div class="module signin-input">
      <input type="text" class="s-text w60" id="codeText" placeholder="请输入图形验证码" /><span class="signin-v-code">
        <img src="http://via.placeholder.com/150x35" width="100%" height="35" alt=""></span>
    </div>
    <div class="module signin-input">
      <input type="text" class="s-text"  id="passwordText" placeholder="请输入账户密码" />
    </div>
  </div>
</script>

<script type="text/html" id="tplSignin1">
  <div class="signin-content">
    <div class="module signin-input">
      <input  type="tel" class="s-text"  placeholder="请输入手机号码" />
    </div>
    <div class="module signin-input">
      <input type="text" class="s-text w60" id="codeText" placeholder="请输入图形验证码" /><span class="signin-v-code"> <img src="http://via.placeholder.com/150x35" width="100%" height="35" alt=""></span>
    </div>
    <div class="module signin-input">
      <input type="text" class="s-text w60" id="noteText" placeholder="请输入短信验证码" />
      <div class="phone-code j_send_register">发送手机验证码</div>
    </div>
  </div>
</script>
<script type="text/html" id="tplSignin2">
  <div class="signin-content">
    <div class="module signin-input">
      <input type="tel" class="s-text" placeholder="请输入手机号码" />
    </div>
    <div class="module signin-input">
      <input type="text" class="s-text w60" id="codeText" placeholder="请输入图形验证码" /><span class="signin-v-code"> <img src="http://via.placeholder.com/150x35" width="100%" height="35" alt=""></span>
    </div>
    <div class="module signin-input">
      <input type="text" class="s-text w60" id="noteText" placeholder="请输入短信验证码" />
      <div class="phone-code j_send_register">发送手机验证码</div>
    </div>
    <div class="module signin-input">
      <input type="password" class="s-text"  id="accountPassword1" placeholder="请输入账号密码" />
      <span class="iconfont j-password">&#xe6b1;</span>
    </div>
    <div class="module signin-input">
      <input type="password" class="s-text"  id="accountPassword2" placeholder="请再次输入账号密码" />
      <span class="iconfont j-password">&#xe6b1;</span>
      <span class="text-tip"><i> * </i>注：密码请包含数字、英文、字符，不少于8位</span>
    </div>
  </div>
</script>

<script>
  $(document).ready(function () {
    //协议弹窗



    $('.js_statement').on('click', function () {
      var signin = layer.open({
        type: 1,
        title: false,
        area: ['580px', 'auto'], //宽高
        shade: 0.6,
        closeBtn: 0,
        scrollbar: false,
        skin: 'win-signin',
        content: $('#tplSignin').html(),
        success: function () {
          //同意与否
          $('.confirmBtn').on('click', function () {
            var sType = $(this).attr('s-type');
            if (sType == 1) {
              $('.js_signin_statement').prop('checked', true);
              $('.loginBtn').removeAttr('disabled');
            } else {
              $('.js_signin_statement').prop('checked', false);
              $('.loginBtn').attr("disabled", "disabled");
            }
            layer.close(signin);
          })
        }
      });
    })

    //协议
    $('.js_signin_statement').on('click', function () {
      if ($(this).is(":checked")) {
        $('.loginBtn').removeAttr('disabled');
      } else {
        $('.loginBtn').attr("disabled", "disabled");
      }
    })

    if($(".js_signin_statement").prop("checked")){
      $('.loginBtn').removeAttr('disabled');
    } else {
      $('.loginBtn').attr("disabled", "disabled");
    }

    $('input[type=tel]').keypress(function(e) {
    　　if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
    　　　　return false;
    　　}
    });

    //登录注册忘记密码切换
    $(".signinPwd").hide(); //注册页面隐藏
    $('.signinItem').on('click', function () {
      $(this).parents('.signin-panel').find('.signinItem').removeClass('hover');
      $(this).addClass('hover');
      var indexV = $(this).attr('tpid');   
      if (indexV == 0) {
        $('.loginBtn').val('登录');
        $(".sign_module_item").html($("#tplSignin0").html())
        $(".signinPwd").show();
      } else if (indexV == 1) {
        $('.loginBtn').val('注册');
        $(".sign_module_item").html($("#tplSignin1").html())
        $(".signinPwd").hide();
      } else {
        $('.loginBtn').val('确定修改');
        $(".sign_module_item").html($("#tplSignin2").html())

      }
      var listObj = $(".signin-content").eq(indexV);
      listObj.show();
      listObj.siblings(".signin-content").hide();
    })
    

    var type=1;
    $(".loginBtn").on("click",function(){
      var value =  $(this).val();
      if(value==="登录"){
        type = 0;
      }else if(value==="注册"){
        type = 1;
      }else{
        type = 2;
      }
      textPhone(type);
     
    })

    // 发送验证码
    
    $(".sign_module_item").on("click",".j_send_register",function(){

      var _this = $(this);
      // 发送时需重新验证手机号码
      var tel = $("input[type=tel]").val().trim();  //手机号码
      if(!tel){
        layer.msg("手机号码不能为空！请输入手机号码")
        return false;
      }
      if (!(/^1[3456789]\d{9}$/.test(tel))) {
        layer.msg("手机号码有误！请输入正确的手机号码")
        return false;
      }
      
      if(_this.hasClass("phone-code-disabled")) return false; //防止重复点击

      _this.addClass("phone-code-disabled");
      // 短信倒计时
      var time = 60;
      var countDown =  setInterval(() => {
        time--;
        if(time == 0){
          _this.html("发送手机验证码")
          clearInterval(countDown);
          _this.removeClass("phone-code-disabled")
          return false;
        }
        _this.html("重新发送"+time+"S")
      }, 1000);
      


    }) 

    // 表单验证
    function textPhone(type){
      var tel = $("input[type=tel]").val().trim();  //手机号码
      var codeText = $("#codeText").val().trim();  //图形验证
     
      if(!tel){
        layer.msg("手机号码不能为空！请输入手机号码")
        return false;
      }

      if (!(/^1[3456789]\d{9}$/.test(tel))) {
        layer.msg("手机号码有误！请输入正确的手机号码")
        return false;
      }

      if(!codeText){
        layer.msg("图形验证码不正确")
        return false;
      }
     
      // 登录才需要
      if(type==0){
        var passwordText = $("#passwordText").val().trim();  //密码
          if(!passwordText){
          layer.msg("账户密码不正确！请重新输入")
          return false;
        }
        layer.msg("登录成功!即将跳转首页")
        setTimeout( () => {
          window.location.href="/index.html"
        },3000)
        return false;
      }

      // 注册才需要
      if(type==1){
        var noteText =  $("#noteText").val().trim();  //手机验证码 
        if(!noteText){
          layer.msg("手机验证码不正确")
          return false;
        }
        // 注册成功后
        layer.msg("注册成功！")
      }

     
      // 忘记密码
      if(type==2){
        var accountPassword1 = $("#accountPassword1").val().trim();
        var accountPassword2 = $("#accountPassword2").val().trim()
        var noteText =  $("#noteText").val().trim();  //手机验证码 
        if(!noteText){
          layer.msg("手机验证码不正确")
          return false;
        }
        if(!accountPassword1){
          layer.msg("请输入账号密码")
          return false;
        }
        if(!accountPassword2){
          layer.msg("再次请输入账号密码")
          return false;
        }
        
        
        if(accountPassword1!=accountPassword2){
          layer.msg("两次输入的账号密码不一致！请重新输入")
          return false;
        }
        if (!(/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/.test(accountPassword1))||accountPassword1.lenght>7){
           layer.msg("密码请包含数字、英文、字符，不少于8位")
           return false;
        }
        if (!(/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/.test(accountPassword2))||accountPassword2.lenght>7) {
           layer.msg("密码请包含数字、英文、字符，不少于8位")
           return false;
        }
        layer.msg("密码重置成功")
       
      }

      $(".sign_module_item").html($("#tplSignin0").html());
      $('.loginBtn').val('登录');
      $('.signinItem').removeClass('hover');
      $(".signinItem").eq(0).addClass("hover");



    }

    // 查看密码
    $(".signin-panel").on("click",".j-password",function(){
      console.log(1111)
      var $t = $(this);
      $t.toggleClass("passwordTrue");
      var text = "&#xe62e;";
      if( $t.hasClass("passwordTrue")){
        $t.parent().find("input").attr("type", "text");
      }else{
        $t.parent().find("input").attr("type", "password");
        text = "&#xe6b1;";
      }
      $t.html(text)
    })



  });
</script>

</html>